<!--
 * @页面: 登录页
 * @描述: 信息展示界面和登录弹窗
 * @作者：赵涛
 * @日期: 2021-07-13 14:27:29
-->

<template>
  <div :class="`${theme}`">
    <div class="content">
      <div class="left">
        <div class="left-top">
          <div class="sale">
            <div class="title">当日销售额</div>
            <Number />
            <!-- <div class="num">{{ marketData }}</div> -->
          </div>
          <div class="CRmember">
            <div class="title">当日充值额</div>
            <div class="num">{{ CRdata }}</div>
          </div>
        </div>
        <div class="shop-list">
          <div class="title">门店销售额排行</div>
          <div class="title-list">
            <span style="width: 40%">店名</span>
            <span>销售额</span>
            <span>TC</span>
          </div>
          <!-- <vue-seamless-scroll :data="List" class="list-box"> -->
          <el-carousel class="carousel"
                       :interval="10000"
                       :loop="true">
            <el-carousel-item>
              <ul class="list">
                <li v-for="(item, index) in List.slice(0, 12)"
                    :key="index"
                    class="li">
                  <div class="name">
                    <span style="margin-right: 0.1rem; font-size: 0.2rem">
                      <img v-if="index === 0"
                           style="width: 15%"
                           src="../../assets/hg.png"
                           alt="第一名" />
                      <span v-else>{{ index + 1 }}</span>
                    </span>
                    {{ item.sName }}
                  </div>
                  <div class="money">{{ item.Netamt.toFixed(2) }}</div>
                  <div class="increase">{{ item.TC }}</div>
                </li>
              </ul>
            </el-carousel-item>
            <el-carousel-item>
              <ul class="list">
                <li v-for="(item, index) in List.slice(12, 24)"
                    :key="index"
                    class="li">
                  <div class="name">
                    <span style="margin-right: 10px; font-size: 0.2rem">{{
                      index + 13
                    }}</span>{{ item.sName }}
                  </div>
                  <div class="money">{{ item.Netamt.toFixed(2) }}</div>
                  <div class="increase">{{ item.TC }}</div>
                </li>
              </ul>
            </el-carousel-item>
          </el-carousel>
          <!-- </vue-seamless-scroll> -->
        </div>
      </div>
      <div class="cont">
        <div class="hotsale">
          <div class="title">热点产品</div>
          <div class="charts">
            <hot-sale @hotDataLength="hotDataLength" />
          </div>
        </div>
        <div class="graph">
          <div class="title">{{ hotProData.Name }}</div>
          <div class="chart">
            <span class="chart1">
              <!-- <span>{{ item.pie }}</span> -->
              <pieCharts :pieData="hotProData.dtOM" />
            </span>
            <span class="chart2">
              <pieCharts2 :pieData="hotProData.dtType" />
            </span>
          </div>
        </div>
      </div>
      <div class="right">
        <div class="time-display">
          <now-time />
        </div>
        <div class="CRranking">
          <div class="title">门店充值排行</div>
          <div class="content">
            <Bullet />
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>

import HotSale from './HotSale.vue'
import pieCharts from './pieCharts.vue'
import pieCharts2 from './pieCharts2.vue'
import Bullet from './Bullet.vue'
import Number from './Number.vue'
import nowTime from './nowTime.vue'
import { mapState } from 'vuex'

export default {
  name: 'page-one',
  components: {
    HotSale,
    pieCharts,
    pieCharts2,
    Bullet,
    Number,
    nowTime
    // vueSeamlessScroll
  },
  computed: {
    ...mapState(['theme']),
  },
  data() {
    return {
      marketData: '', // 实时销售额数据
      CRdata: '', // 当日会员充值额数据
      List: [], // 门店销售额排行
      hotProData: [],
      hotDatacount: 0,
      count: 1
    }
  },
  created() {
    this.getData()
  },
  mounted() {
    this.timer = setInterval(this.getData, 8000)
  },
  beforeDestroy() {
    clearInterval(this.timer)
  },
  methods: {
    // 获取实时销售额等数据
    getData() {
      //   获取门店销售额排行数据
      this.$http({
        method: 'get',
        url: '/api/dataReport.ashx?action=!StoreSalesTmp',
        data: {}
      }).then(res => {
        if (res.status === 200) {
          console.log('排行', res.data.dt)
          this.List = res.data.dt
        }
      })
      // 获取当日会员充值额数据
      this.$http({
        method: 'get',
        url: '/api/dataReport.ashx?action=!StoreInvestTotalTmp',
        data: {}
      }).then(res => {
        if (res.status === 200) {
          console.log('会员', res.data.dt)
          this.CRdata = res.data.dt.toLocaleString()
        }
      })


      this.$http({
        method: 'get',
        url: '/api/dataReport.ashx?action=!StoreInfo',
        data: {}
      }).then(res => {
        console.log('11111'.res);
      })


      // 获取中下数据
      if (this.count <= this.hotDatacount) {
        this.count = this.count + 1
        console.log(this.count)
      }
      if (this.count > this.hotDatacount) {
        this.count = 1
      }
      this.$http({
        method: 'get',
        url: '/api/dataReport.ashx?action=!PMixSalesTmpByGroup',
        params: { para1: this.count }
      }).then(res => {
        if (res.status === 200) {
          console.log('获取中下数据', res.data.dt[0])
          this.hotProData = res.data.dt[0]
        }
      })
    },
    hotDataLength(data) {
      this.hotDatacount = data
    }
  }
}
</script>

<style lang="less" scoped>
.standard {
  height: 100vh;
  // 中间内容
  .content {
    height: calc(100vh - 0.8rem);
    display: flex;
    align-content: center;
    justify-content: space-between;
    padding: 10px 10px 15px 10px;
    // 左边（销售额、门店排行）
    .left {
      height: 100%;
      width: 26%;
      display: flex;
      flex-direction: column;
      .left-top {
        background: url('../../assets/back-image/form.png') no-repeat center;
        background-size: 100% 100%;
        height: 40vh;
        letter-spacing: 2px;
        padding: 10px;
        display: flex;
        align-items: center;
        flex-direction: column;
        justify-content: center;
        .sale {
          margin-bottom: 0.2rem;
          text-align: center;
          .title {
            color: white;
            font-size: 0.2rem;
          }
          .num {
            font-size: 0.6rem;
          }
        }
        .CRmember {
          .title {
            text-align: center;
            font-size: 0.2rem;
            color: white;
          }
          .num {
            color: #ffeb7b;
            margin-top: 10px;
            font-size: 0.7rem;
            //   font-family: Impact, Haettenschweiler, "Franklin Gothic Bold",
            //     "Arial Black";
            font-family: 'DS-DIGIT';
            letter-spacing: 6px;
          }
        }
      }
      .shop-list {
        height: 100vh;
        background: url('../../assets/back-image/form.png') no-repeat center;
        background-size: 100% 100%;
        margin-top: 10px;
        display: flex;
        align-items: center;
        flex-direction: column;
        padding: 10px 20px;
        letter-spacing: 2px;
        color: #82dbff;
        // overflow: hidden;
        .title {
          font-size: 0.2rem;
          color: white;
        }
        .title-list {
          width: 100%;
          margin: 10px 10px 0 20px;
          display: flex;
          color: white;
          justify-content: space-between;
          span {
            font-size: 0.2rem;
          }
        }
        // .list-box {
        //   width: 100%;
        //   height: 100%;
        //   margin: 20px;
        //   overflow: hidden;
        .carousel {
          width: 100%;
          height: 100%;
          .el-carousel__indicators {
            display: none;
          }
          .el-carousel__container {
            height: 100%;
            .list {
              width: 100%;
              height: 100%;
              padding: 0;
              display: flex;
              flex-direction: column;
              .li {
                width: 100%;
                height: 100%;
                display: flex;
                justify-content: space-between;
                flex-direction: row;
                align-items: center;
                // margin-top: 15px;
                div {
                  font-size: 0.22rem;
                }
                .name {
                  width: 45%;
                  text-overflow: ellipsis;
                }
                .money {
                  width: 20%;
                  text-align: right;
                }
                .increase {
                  width: 15%;
                  text-align: right;
                }
              }
            }
          }
        }
      }
    }
    .cont {
      width: 48%;
      height: 100%;
      display: flex;
      flex-direction: column;
      align-items: center;
      .hotsale {
        height: 5rem;
        width: 100%;
        background: url('../../assets/back-image/form.png') no-repeat center;
        background-size: 100% 100%;
        display: flex;
        align-items: center;
        flex-direction: column;
        padding: 10px 20px;
        letter-spacing: 2px;
        .title {
          font-size: 0.2rem;
          font-family: '';
        }
        .charts {
          width: 100%;
          height: 95%;
        }
      }
      .graph {
        margin-top: 10px;
        width: 100%;
        height: calc(100% - 5rem - 12px);
        background: url('../../assets/back-image/form.png') no-repeat center;
        background-size: 100% 100%;
        display: flex;
        flex-direction: column;
        justify-content: center;
        padding: 10px;
        text-align: center;
        letter-spacing: 2px;
        .title {
          font-size: 0.2rem;
          letter-spacing: 5px;
        }
        .chart {
          width: 100%;
          height: 100%;
          display: flex;
          .chart1 {
            width: 100%;
            height: 100%;
          }
          .chart2 {
            width: 100%;
            height: 100%;
          }
        }
      }
    }
    .right {
      height: 100%;
      width: 25%;
      display: flex;
      flex-direction: column;
      .time-display {
        height: 100px;
        width: 100%;
        // padding: 10px;
        // background: url("../../assets/back-image/form.png") no-repeat center;
        // background-size: 100% 100%;
      }
      .CRranking {
        height: 100%;
        width: 100%;
        background: url('../../assets/back-image/form.png') no-repeat center;
        background-size: 100% 100%;
        margin-top: 10px;
        display: flex;
        align-items: center;
        flex-direction: column;
        padding: 10px 20px;
        letter-spacing: 2px;
        color: white;
        overflow: hidden;
        .title {
          font-size: 0.2rem;
        }
        .content {
          width: 100%;
          height: 100%;
        }
      }
    }
  }
}
</style>
